<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Oracle
  Date: 2022/4/28
  Time: 22:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href="/static/css/font/iconfont.css"/>
    <link rel="stylesheet" href="/static/css/userpage.css">
    <link rel="stylesheet" href="/static/css/floatbar.css">
    <link rel="stylesheet" href="/static/css/font.css"/>
    <script src="/static/js/store.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .main {
            width: 100%;
            height: auto;
            border: 0px solid red;
            margin: auto;
            background-image: url(/static/image/header-bg_csgo.jpg);
            background-repeat: no-repeat;
        }

        .top {
            height: 71px;
        }

        .middle {
            width: 1200px;
            height: auto;
            border: 0px solid #333;
            margin: auto;
        }

        .middle1 {
            height: 20px;
            width: 1200px;
            border: 0px solid royalblue;
        }

        .middle2 {
            height: 34px;
            width: 1200px;
            border: 0px solid #333;
            color: white;
            font-size: 12px;
        }

        .middle3 {
            width: 1200px;
            height: 1600px;
            border: 0px solid royalblue;
            margin: auto;
        }

        .middle3-0 {
            width: 1200px;
            height: 194px;
            border: 1px solid #1e2329;
            margin: auto;
            background-color: #1e2329;
            font-size: 12px;
        }

        .middle3-1 {
            width: 287px;
            height: 194px;
            border: 0px solid greenyellow;
            margin-right: 20px;
            float: left;
            background-image: url(/static/image/goods_detail_bg.png);
        }

        .middle3-1 img {
            margin-left: 40px;
            margin-top: 15px;
        }

        .middle3-2 {
            width: 860px;
            height: 28px;
            border: 0px solid greenyellow;
            float: left;
            margin-top: 30px;
        }

        .middle3-2-0 {
            width: 45px;
            height: 28px;
            border: 0px solid greenyellow;
            float: left;
            margin-left: 800px;
            color: white;
            margin-top: -30px;
        }
        .middle3-2-0 a{
            text-decoration: none;
            color: white;
            font-size: 14px;
        }

        h1 {
            color: white;
        }

        .middle3-3 {
            width: 860px;
            height: 1px;
            border: 0px solid greenyellow;
            float: left;
            margin-top: 20px;
            background-image: linear-gradient(-270deg, rgba(238, 162, 14, .4) 0, rgba(238, 162, 14, .4) 2%, #16171c 100%);
        }

        .middle3-4 {
            width: 860px;
            height: 25px;
            border: 0px solid crimson;
            float: left;
            margin-top: 20px;
        }

        .middle3-4-0 {
            width: 210px;
            height: 30px;
            border: 0px solid darkorange;
            float: left;
            margin-left: 650px;
            margin-top: -20px;
            color: white;
            text-align: center;
        }


        /*我要出售按钮*/
        .middle3-4-1 {
            width: 96px;
            height: 30px;
            float: left;
            background: #45536C;
            font-size: 14px;
            line-height: 30px;
        }
        .middle3-4-1:hover{
            cursor: pointer;
            background-color: #52647f;
        }

        .middle3-4-3 {
            width: 360px;
            height: 23px;
            color: #90969C;
        }

        .middle3-4-3 b {
            color: #eea20e;
            font-size: 17px;
        }

        /*我要求购按钮*/
        .middle3-4-2 {
            width: 96px;
            height: 30px;
            float: left;
            margin-left: 13px;
            background: #863d3d;
            font-size: 14px;
            line-height: 30px;
        }
        .middle3-4-2:hover{
            cursor: pointer;
            background-color: #994848;
        }

        .middle4 {
            width: 1200px;
            height: 0.5px;
            border: 0px solid orchid;
            background-image: linear-gradient(270deg, rgba(91, 126, 176, .8) 0, rgba(46, 71, 120, .8) 100%);
        }

        .middle6 {
            width: 1200px;
            height: 55px;
            border: 1px solid #333;
            background: #1e2329;
        }

        #middle5 {
            width: 780px;
            height: 42px;
            display: flex;
            margin-left: 8px;
            margin-top: 12px;
        }

        #middle5 li {
            width: 100px;
            height: 32px;
            border: 1px solid #495B7E;
            font-size: 12px;
            line-height: 32px;
            color: #899ab9 !important;
            text-align: center;
            border-radius: 2px;
            float: left;
            margin-left: 10px;
        }

        .abrasionUl li:hover {
            background-color: #495B7E;
        }


        .middle7 {
            width: 1200px;
            height: 20px;
            border: 0px solid red;
        }

        .middle8 {
            width: 1200px;
            height: 132px;
            border: 1px solid #14141e;
            background: #14141e;
        }

        /*当前在售部分css样式*/
        .middle8-0-1 {
            width: 1200px;
            height: 32px;
            border: 0px solid green;
            margin-top: 15px;
            color: #90969C;
            margin-left: 20px;
        }

        .middle8-0-1 li {
            width: 100px;
            height: 50px;
            float: left;
            color: #90969C;
            line-height: 50px;
            font-weight: bold;
        }

        .middle8-0-1 li:hover {
            color: white;
        }

        .middle8-0-2 {
            height: 1px;
            width: 1135px;
            border: 0px solid royalblue;
            background-color: royalblue;
            margin-left: 18px;
            margin-top: 20px;
        }

        .middle8-0-3 {
            height: 50px;
            width: 1135px;
            border: 0px solid royalblue;
            margin-top: 7px;
            color: #888D94;
            font-size: 12px;
            line-height: 26px;
        }

        .middle8-0-3-0 {
            height: 40px;
            width: 100px;
            margin-top: 7px;
            float: left;
        }

        .middle8-0-3-1 {
            height: 32px;
            width: 98px;
            float: left;
            background-color: #2D2F3E;
            text-align: center;
            border-radius: 2px;
            margin-left: 17px;
            line-height: 32px;
            font-size: 13px;
        }

        .middle9 {
            height: 1115px;
            width: 1200px;
            border: 0px solid red;
        }
        .middle_2{
            height: 100vh;
            width: 1200px;
            border: 0px solid black;
            background-color: white;
            text-align: center;
        }
        .middle_2 img{
           margin-top: 70px;
        }

        .middle9-0 {
            height: 30px;
            width: 1200px;
            border: 0.5px solid #E9E9E9;
            color: #90969C;
            background-color: #e5e5e5;
            line-height: 30px;
        }

        .middle9-0-1 {
            height: 25px;
            width: 40px;
            border: 0px solid red;
            float: left;
            margin-left: 20px;
            text-align: center;
        }

        .middle9-0-2 {
            height: 25px;
            width: 60px;
            float: left;
            margin-left: 73px;
            text-align: center;
        }

        .middle9-0-3 {
            height: 25px;
            width: 60px;
            border: 0px solid red;
            float: left;
            margin-left: 425px;
            text-align: center;
        }

        .middle9-0-4 {
            height: 25px;
            width: 40px;
            border: 0px solid red;
            float: left;
            margin-left: 120px;
            text-align: center;
        }

        .middle9-0-5 {
            height: 25px;
            width: 40px;
            border: 0px solid red;
            float: left;
            margin-left: 95px;
            text-align: center;
        }

        .middle9-1 {
            height: 107px;
            width: 1200px;
            border: 1px solid #E9E9E9;
            color: #90969C;
            background-color: #F5F5F5;
        }

        .middle9-1-0 {
            height: 70px;
            width: 90px;
            border: 0px solid orange;
            background-image: url(/static/image/item_bg.png);
            margin: 18px 0px 0px 22px;
            float: left;
        }

        .middle9-1-0 img {
            margin-left: 11px;
            margin-top: 5px;
        }


        .middle9-1-1 {
            height: 70px;
            width: 200px;
            float: left;
            margin: 18px 0px 0px 30px;
        }

        /*磨损标签*/
        .middle9-1-1-0 {
            height: auto;
            width: 200px;
            margin: 13px 0px;
        }
        .middle9-1-1-0 p {
            font-size: 13px;
        }

        /*磨损条css*/
        .middle9-1-1-1 {
            height: 7px;
            width: 190px;
        }
        .middle9-1-1-1 div{
            height: 7px;
            float: left;
        }
        .m1{
            width: 16px;
            background: #4ec7a7;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .m2{
            width: 16px;
            background: #70ab8b;
        }
        .m3{
            width: 43px;
            background: #cfae8e;
        }
        .m4{
            width: 15px;
            background: #d4948e;
        }
        .m5{
            width: 95px;
            background: #cf534e;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .middle9-1-3 {
            height: 70px;
            width: 170px;
            border: 0px solid orange;
            float: left;
            margin: 18px 0px 0px 290px;
        }

        .middle9-1-3-0 {
            height: 35px;
            width: 35px;
            border: 0px solid orange;
            float: left;
            margin: 13px 0px 0px 0px;
            border-radius: 17px;

        }

        .middle9-1-3-0 img {
            border-radius: 50%;

        }

        .middle9-1-3-1 {
            height: 40px;
            width: 120px;
            border: 0px solid orange;
            float: left;
            margin: 20px 0px 0px 0px;
        }

        .middle9-1-4 {
            height: 70px;
            width: 70px;
            border: 0px solid orange;
            float: left;
            margin: 18px 0px 0px 0px;
            color: #eea20e;
            line-height: 62px;
            font-weight: bold;
        }

        .middle9-1-5 {
            height: 30px;
            width: 80px;
            border: 0px solid orange;
            float: left;
            margin: 35px 0px 0px 63px;
            color: #fff;
            background: #4773C8;
            text-align: center;
            border-radius: 2px;
            line-height: 30px;
            font-size: 14px;
        }
        .middle9-1-5:hover{
            cursor: pointer;
            background: #6198ff;
        }

        .paging {
            height: 36px;
            width: 100%;
            border: 0px solid cornflowerblue;
            margin: 20px auto;
            line-height: 36px;
            text-align: center;
        }

        .previousPage {
            height: 36px;
            width: 69px;
            border: 1px solid silver;
            text-align: center;
            float: left;
            background: #F4F4F5;
            color: #909198;
            border-radius: 2px;
        }

        .pageNum {
            height: 36px;
            border: 0px solid silver;
            display: flex;
            float: left;
            text-align: center;
        }

        .pageNum div {
            width: 40px;
            height: 35px;
            border: 1px solid silver;
            border-radius: 2px;
            color: #45536C;

        }

        .nextPage {
            height: 36px;
            width: 69px;
            border: 1px solid silver;
            text-align: center;
            float: left;
            border-radius: 2px;
        }

        .middle3-0 p {
            color: #c6cad0;
            margin: 75px 28px 0px 0px;
        }

        .middle2 a {
            color: white;
        }

        /*--------------------分割线----------------------*/
        .priceFilter {
            height: 32px;
            width: 18vw;
            float: left;
            margin:10px 0 0 43vw;
        }

        .priceFilter input {
            padding: 7px;
            width: 70px;
            background-color: #00000000;
            border: 1px solid gray;
            text-align: center;
            font-size: 11px;
            color: white;
        }

        .minPrice, .maxPrice {
            display: inline;
        }

        .priceFilterBtn {
            display: inline-flex;
            height: 30px;
            width: 60px;
            background: #3F5D97;
            color: white;
            line-height: 30px;
            margin-left: 6px;
        }

        .priceFilterBtn font {
            margin: 0 auto;
            font-size: 9px;
        }
    </style>


</head>

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    $(function (){

        $(".middle9-1-5").click(function () {
            var orderNumber = $(this).children(".orderNumber").val();
            var sellId = $(this).children(".sellId").val();
            var id = ${sessionScope.userNow.id}
            if(sellId == id){
                alert("不能购买自己的饰品");
            } else {
                if(confirm("确认购买 '${requestScope.ep.goods.goodsType.name} | ${requestScope.ep.goods.coating}' 吗")){
                    $.ajax({
                        url: "${pageContext.request.contextPath}/deal/buyGoods",
                        data: {"orderNumber": orderNumber},
                        type: "post",
                        traditional:true,
                        success: function (data) {
                            if(data == "ok"){
                                alert("购买成功,请到我的库存中查看");
                                window.location.href = "${pageContext.request.contextPath}/goods/goodsInfo/${ep.id}";
                            } else {
                                alert("余额不足,请及时充值");
                            }
                        },
                        error: function () {
                            alert("请求失败");
                        }
                    })
                }
            }


        })

    })

</script>

<body>
<div class="main">
    <div class="top">
        <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%" height="71px"
                frameborder="0" name="goodsInfo"></iframe>
    </div>
    <div class="middle">
        <div class="middle1"></div>
        <!--头-->
        <div class="middle2"><a href="/goods/market?dealType=1&pageNum=1">饰品市场</a>&nbsp;&nbsp;&nbsp;&nbsp;>
            &nbsp;&nbsp;&nbsp;&nbsp;${requestScope.ep.goods.goodsType.name} |
            ${requestScope.ep.goods.coating} (${requestScope.ep.appearance})
        </div>
        <!--身子-->
        <div class="middle3">
            <div class="middle3-0">
                <div class="middle3-1">
                    <img src="${requestScope.ep.goods.converPath}" width="170px" height="170px">
                </div>
                <div class="middle3-2"><h1>${requestScope.ep.goods.goodsType.name} |
                    ${requestScope.ep.goods.coating}
                    (${requestScope.ep.appearance})
                </h1>
                    <div class="middle3-2-0">
                        <a href="/javascript:;">
                            <span class="icon iconfont">&#xeb26;</span>收藏
                        </a>
                    </div>
                </div>
                <p>
                    <span>品质 |</span>&nbsp;&nbsp;${requestScope.ep.goods.quality}&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>类别 |</span>&nbsp;&nbsp;${requestScope.ep.goods.category}&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>类型 |</span>&nbsp;&nbsp;${requestScope.ep.goods.goodsType.typeName}
                </p>
                <div class="middle3-3"></div>
                <div class="middle3-4">
                    <div class="middle3-4-3">
                        参考价格 |&nbsp;&nbsp;&nbsp;
                        <b>￥${requestScope.ep.priceCh}</b>
                        <font></font>
                    </div>
                    <div class="middle3-4-0">
                        <div class="middle3-4-1">
                            <span>我要出售</span>
                        </div>
                        <div class="middle3-4-2">
                            <span>我要求购</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle4"></div>
            <div class="middle6">
                <div id="middle5">
                    <ul class="abrasionUl">
                        <a href="javascript:;">
                            <li>崭新出厂</li>
                        </a>
                        <a href="javascript:;">
                            <li>略有磨损</li>
                        </a>
                        <a href="javascript:;">
                            <li>破损不堪</li>
                        </a>
                        <a href="javascript:;">
                            <li>久经沙场</li>
                        </a>
                        <a href="javascript:;">
                            <li>战痕累累</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="middle7"></div>
            <!--腿-->
            <div class="middle8">
                <div class="middle8-0">
                    <div class="middle8-0-1">
                        <ul>
                            <a href="javascript:;">
                                <li>当前在售</li>
                            </a>
                            <a href="javascript:;">
                                <li>当前求购</li>
                            </a>
                            <a href="javascript:;">
                                <li>玩家秀</li>
                            </a>
                            <a href="javascript:;">
                                <li>成交记录</li>
                            </a>
                            <a href="javascript:;">
                                <li>磨损排行</li>
                            </a>
                        </ul>
                    </div>
                    <div class="middle8-0-2"></div>
                    <div class="middle8-0-3">
                        <div class="middle8-0-3-0">
                            <div class="middle8-0-3-1">磨损区间</div>
                        </div>
                        <div class="priceFilter">
                            <div class="minPrice">
                                ￥<input type="text" placeholder="最低价">
                            </div>
                            <div class="maxPrice">
                                -￥<input type="text" placeholder="最高价">
                            </div>
                            <div class="priceFilterBtn">
                                <font>确认</font>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="middle9-0">
                <div class="middle9-0-1">饰品</div>
                <div class="middle9-0-2">磨损度</div>
                <div class="middle9-0-3">卖家</div>
                <div class="middle9-0-4">价格</div>
                <div class="middle9-0-5">操作</div>
            </div>

            <c:if test="${not empty requestScope.dealList}">
                    <div class="middle9">
                        <c:forEach items="${requestScope.dealList}" var="deal">
                        <div class="middle9-1">
                            <div class="middle9-1-0">
                                <img src="${requestScope.ep.goods.converPath}" width="64px" height="60px">
                            </div>
                            <div class="middle9-1-1">
                                <div class="middle9-1-1-0">
                                    <p>磨损值:${requestScope.ep.abrasion}</p>
                                </div>
                                <div class="middle9-1-1-1">
                                    <div class="m1"></div>
                                    <div class="m2"></div>
                                    <div class="m3"></div>
                                    <div class="m4"></div>
                                    <div class="m5"></div>
                                </div>
                            </div>
                            <div class="middle9-1-2"></div>
                            <div class="middle9-1-3">

                                <div class="middle9-1-3-0">
                                    <img src="${deal.user.headPath}" width="30px"
                                         height="30px" align="center">
                                </div>
                                <c:if test="${not empty deal.user.username}">
                                    <div class="middle9-1-3-1"> ${deal.user.username}</div>
                                </c:if>
                                <c:if test="${empty deal.user.username}">
                                    <div class="middle9-1-3-1"> ${deal.user.tellphone}</div>
                                </c:if>
                            </div>
                            <div class="middle9-1-4">
                                ￥<big>${deal.price}</big>
                            </div>
                            <div class="middle9-1-5" id="goBuy" value="${deal.user.id}">
                                <input type="hidden" class="orderNumber" value="${deal.orderNumber}">
                                <input type="hidden" class="sellId" value="${deal.user.id}">
                                购买</div>
                        </div>
                </c:forEach>
                <!--分页-->
                <div class="paging">
                    <div class="previousPage">上一页</div>
                    <div id="pageNum" class="pageNum">
                        <div class="MYdiv">1</div>
                    </div>
                    <div class="nextPage">下一页</div>
                </div>
                </div>
            </c:if>

            <c:if test="${empty requestScope.dealList}">
            <div class="middle_2">
                <img src="/static/image/data-nodata.png" width="400px" height="150px">
                <br/><br><br/>
                <h3>该饰品暂无交易</h3>
            </div>

            </c:if>



        </div>

    </div>
</div>
</div>
</div>
</div>
<div class="floatbar">
    <a href="">
        <div class="Icontext"><span class="iconfont icon-shouji"></span><br/>
            <font size="1">App</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-xingxing"></span><br/>
            <font size="1" color="#95959">收藏</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weixin"></span><br/>
            <font size="1" color="#95959">公众号</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weibo"></span><br/>
            <font size="1" color="#95959">微博</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-wenhao"></span><br/>
            <font size="1" color="#95959">帮助</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-duanxin"></span><br/>
            <font size="1" color="#95959">客服</font>
        </div>
    </a>
    <a href="javascript:scroll(0,0);">
        <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br/>
            <font size="2" color="#95959">TOP</font>
        </div>
    </a>
</div>
<%-- 用户信息悬浮框 --%>
<div class="store" id="store">
    <div class="store-info">
        <div class="store-user">
            <div class="store-user-img">
                <c:if test="${empty sessionScope.userNow.headPath}">
                    <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                </c:if>
                <c:if test="${not empty sessionScope.userNow.headPath}">
                    <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                </c:if>
            </div>
            <div class="store-user-name">
                <c:if test="${not empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.username}</h4>
                </c:if>
                <c:if test="${empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.tellphone}</h4>
                </c:if>
                <p><a href="/user/logout">注销</a></p>
            </div>
        </div>
        <div class="store-account">
            <div class="balance">余额
                <span>￥0</span>
            </div>
            <div class="topUp">
                <a href="${pageContext.request.contextPath }/user/center">充值</a>
            </div>
        </div>
    </div>
</div>

<div class="tail">
    <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px"
            frameborder="0"></iframe>
</div>


</body>
</html>
